<template>
  <div class="my-basic-table">
    <table>
      <tr>
        <td class="my-label">ID：</td>
        <td class="my-value">
          <q-input
            dense
            outlined
            readonly
            type="text"
            v-model.lazy="param.comSid"
          />
        </td>
        <td class="my-ext"></td>
      </tr>
      <tr>
        <td class="my-label">组件：</td>
        <td class="my-value">
          <q-input
            dense
            outlined
            readonly
            type="text"
            v-model.lazy="param.comValue"
          />
        </td>
        <td class="my-ext"></td>
      </tr>
      <tr>
        <td class="my-label">X：</td>
        <td class="my-value">
          <q-input
            dense
            outlined
            type="number"
            v-model.lazy.number="param.position.x"
            @update:model-value="refreshData"
          />
        </td>
        <td class="my-ext"></td>
      </tr>
      <tr>
        <td class="my-label">Y：</td>
        <td class="my-value">
          <q-input
            dense
            outlined
            type="number"
            v-model.lazy.number="param.position.y"
            @update:model-value="refreshData"
          />
        </td>
        <td class="my-ext"></td>
    </tr>
      <tr>
        <td class="my-label">W：</td>
        <td class="my-value">
          <q-input
            dense
            outlined
            type="number"
            v-model.lazy.number="param.position.w"
            @update:model-value="refreshData"
          />
        </td>
        <td class="my-ext"></td>
      </tr>
      <tr>
        <td class="my-label">H：</td>
        <td class="my-value">
          <q-input
            dense
            outlined
            type="number"
            v-model.lazy.number="param.position.h"
            @update:model-value="refreshData"
          />
        </td>
        <td class="my-ext"></td>
      </tr>
      <tr>
        <td class="my-label">旋转：</td>
        <td class="my-value">
          <q-input
            dense
            outlined
            type="number"
            v-model.lazy.number="param.shape.transform"
            @update:model-value="refreshData"
          />
        </td>
        <td class="my-ext"></td>
      </tr>
      <tr>
        <td class="my-label">图层：</td>
        <td class="my-value">
          <q-input
            dense
            outlined
            type="number"
            v-model.lazy.number="param.shape.zIndex"
            @update:model-value="refreshData"
          />
        </td>
        <td class="my-ext"></td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, watch, onMounted, PropType } from  'vue';
import ColorInput from 'components/common/ColorInput.vue';
import { CGraphEntity } from 'stores/editorModels';

export default defineComponent({
  name: 'ComponentBasicItem',
  components: {
    ColorInput
  },
  props: {
    detail: {
      type: Object as PropType<CGraphEntity>,
      required: true
    }
  },
  emits: ['update-data'],
  setup (props, context) {
    // 解构props
    const {
      detail
    } = toRefs(props);

    //定义响应数据
    let param = ref({
      id: 0,
      typeId: 0,
      pageId: 0,
      comLabel: '',
      comValue: '',
      comSid: '',

      position: {
        x: 0,
        y: 0,
        w: 0,
        h: 0
      },
      shape: {
        backgroundColor: '',
        opacity: 0,
        visible: 0,
        zIndex: 0,
        transform: 0
      },
      border: {
        width: 0,
        radius: 0,
        line: '',
        color: ''
      }
    });

    //更新数据
    const refreshData = () => {
      context.emit('update-data', param.value);
    }

    //初始化
    const init = () => {
      param.value.id = detail.value.id;
      param.value.typeId = detail.value.typeId;
      param.value.pageId = detail.value.pageId;
      param.value.comLabel = detail.value.comLabel;
      param.value.comValue = detail.value.comValue;
      param.value.comSid = detail.value.comSid;

      param.value.position.x = detail.value.position.x;
      param.value.position.y = detail.value.position.y;
      param.value.position.w = detail.value.position.w;
      param.value.position.h = detail.value.position.h;

      param.value.shape.backgroundColor = detail.value.shape.backgroundColor;
      param.value.shape.visible = detail.value.shape.visible;
      param.value.shape.opacity = detail.value.shape.opacity;
      param.value.shape.transform = detail.value.shape.transform;
      param.value.shape.zIndex = detail.value.shape.zIndex;
    }

    //监视变量变化
    watch(() => detail, () => {
      init();
    }, { deep: true });

    //挂载组件
    onMounted(() => {
      init();
    });

    return {
      param,
      refreshData
    };
  }
});

</script>

<style lang="scss" scoped>
.my-basic-table {
  padding: 10px;

  .my-label {
    font-weight: bolder;
    text-align: left;
    width: 25%;
    height: 30px;
  }

  .my-value {
    text-align: left;
    width: 65%;
    height: 30px;
  }

  .my-ext {

  }
}
</style>
